// 数据表
<template>
  <div id="main1" style="height: 100%; overflow: auto">
    <h2
      style="
        text-align: center;
        color: #343434;
        margin-bottom: 2vh;
        margin-top: 0.2rem;
      "
    >
      {{ title }}
    </h2>

    <el-table
      :data="params"
      border
      style="color: #0e0e0e"
      :header-cell-style="{ color: '#0e0e0e' }"
    >
      <el-table-column
        v-for="(item, index) in typeList"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        align="center"
      >
        <template slot-scope="scope" show-overflow-tooltip>
          <a
            v-if="item.label == '链接'"
            :href="scope.row.link"
            target="_blank"
            style="color: blue"
            >{{ scope.row.link }}
          </a>
          <span v-else>
            {{ scope.row[item.prop] }}
          </span>
        </template>
      </el-table-column>
    </el-table>

    <el-col :span="7" :offset="6" class="space">
      <pages
        :total="total"
        :currentPage="current"
        :pageSize="size"
        @handleCurrentChangeSub="handleCurrentChange"
      ></pages>
    </el-col>
  </div>
</template>

<script>
import pages from "@/view/compents/graphic/pages.vue";
import { getData } from "@/api/table.js";

export default {
  name: "pageTable",
  components: {
    pages,
  },
  props: {
    title: "",
    tableChoice: "",
  },
  data() {
    return {
      typeList: [],
      tableData: [],
      data: [],
      params: null,
      total: 0,
      current: 1,
      size: 50,
    };
  },
  created() {
    console.log(111);
    this.getProgramList();
  },
  methods: {
    async getProgramList() {
      let res = await getData(
        this.kindId || this.$route.query.kindId,
        this.kindName || localStorage.getItem("kindName"),
        this.current
      );
      if (res.data.code == 200) {
        this.resultList = res.data.result;

        this.getData(this.resultList);
      } else {
        this.$message.error(res.data.message);
      }
    },
    getData(params) {
      this.typeList = [];
      this.params = params[0].dataList;
      this.total = params[0].total;
      console.log("total", this.total);
      let typeList = this.tableChoice.split(",");
      typeList.map((item) => {
        this.typeList.push({
          prop: item.split("|")[1],
          label: item.split("|")[0],
        });
      });
    },
    handleCurrentChange(current) {
      this.current = current;
      this.getProgramList();
    },

    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 !== 0) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "";
      }
    },
  },
};
</script>

<style lang="scss">
.el-table .warning-row {
  background: #e8f4ff !important;
}

.el-table .success-row {
  background: #f0f9eb !important;
}

.space {
  text-align: center;
  margin-top: 20px;
}

#main1 {
  width: 100%;
}
</style>
